<template>
  <div id="main_wrapper">
    <moolng-header></moolng-header>
    <moolng-b></moolng-b>
    <moolng-footer></moolng-footer>
  </div>
</template>

<script>
import MoolngHeader from "./components/MoolngHeader";
import MoolngB from "./components/MoolngB";
import MoolngFooter from "./components/MoolngFooter";
export default {
  name: 'App',
  components:{
    MoolngHeader,
    MoolngB,
    MoolngFooter
  }
}
</script>

<style>
  /*清除浮动*/
  .clearfix:after{
    content: "";
    display: block;
    clear: both;
  }
  body{
    margin: 0px;
  }
  ul{
    margin: 0;
  }
  nav{
    background:#303843;
    height: 50px;
  }
  p{  margin: 0px;
    font-size: 16px;
    letter-spacing: 1px;
  }
  button{
    border: none;
    background: #E03838;
    padding: 10px 20px;
    border-radius: 5px;
  }
  header{
    background: rgba(0,0,0,0.3);
  }
  #main_wrapper{
    magin:0;padding:0;
    background: url("./assets/images/banner.jpg");
    background-attachment: fixed ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  #banner .inner .hr
  {
    margin:0 auto;
    border-top:2px solid #fff;
    width:50%;

  }
  #banner{
    height: 600px;
  }
  nav ul{
    list-style: none;
    margin: 0px;
    float: right;

  }
  nav ul li,nav .logo{
    display: inline-block;
    line-height: 50px;
    margin-right: 20px;

  }
  nav ul li a{
    display: inline-block;
    line-height: 50px;
    text-decoration: none;
    display: inline-block;
    height: inherit;
    color: #fff;
  }

  nav .logo{
    float: left;
    margin-left: 20px;
  }
  nav .logo a{
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 2px;
    color: #fff;
  }
  #banner .inner h1{
    margin: 15px;
    color: #fff;
  }
  #banner .inner p,#banner .inner button,#banner .inner .more{
    color: #fff;
  }
  #banner .inner{
    line-height: 30px;
    width: 400px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top:170px;
  }

  #banner .inner .more{
    margin-top: 170px;
  }
  /*绿色section的开始*/
  .green_section{
    text-align: center;
    background-color: #2EC2A5;
    padding: 80px;
    color: #fff;
  }
  .wrapper{
    width: 600px;
    height: 200px;
    margin: 0 auto;
  }
  .green_section .hr{
    background: #25AF95;
    width: 40%;
    margin: 0 auto;
  }
  .green_section p{
    line-height: 30px;
    letter-spacing: 2px;
  }
  .hr{

    height: 2px;
    width: 100%;
    margin: 0 auto;
    margin: 20px 0px;
  }
  .green_section .icon_group .icon{
    display: inline-block;
    width: 70px;
    height: 70px;
    border:2px solid #1FB194;
    transform: rotate(45deg);
    margin: 20px;

  }
  /*灰色section的开始*/
  .gray_section .image_section{
    width:45%;

  }
  .image_section img{
    width: 100%;
  }

  .article_preview > div{
    float: left;
    font-size: 0px;
  }
  .gray_section{
    background: #252A34;
    color: #fff;
  }
  .gray_section .text_section{
    width:55%;
  }

  .article_preview:after{
    content: "";
    display: block;
    clear: both;
  }
  .text_section{
    /*padding-left: 100px;*/
    /*margin-left: 100px;*/
    /*margin-top: 150px;*/
    /*position: relative;*/
    /*top:150px;*/
    /*left: 100px;*/
  }
  .text_section_content{
    width: 500px;
    position: relative;
    top:150px;
    left: 100px;
  }
  .text_section >*{
    max-width: 90%;
  }
  .text_section h2{
    margin-top: 0;
    font-size: 24px;
    line-height: 10px;
  }
  .text_section  .p{
    font-size: 20px;
  }
  .text_section p{
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 20px;
  }
  .article_preview:nth-child(odd){
    background: rgba(255,255,255,0.02);
  }
  /*紫色section的开始*/
  .purple_section{
    background: #524E92;
    color: #fff;
    padding: 80px;

  }
  .heading_wrapper >div{
    font-size: 0px ;
  }
  .purple_section h2{
    font-size: 22px;
    margin-top: 0px;
  }
  .purple_section .hr{
    background: #4C4889;
    width: 20%;
    margin: 0 auto;
  }

  .card_ground .card h3{
    font-size: 17px;
    line-height: 10px;
  }
  .heading_wrapper{
    text-align: center;
  }
  .card{
    float: left;
    width:50%;
    min-height: 250px;
    padding: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*border: 1px solid black;*/
  }
  .card:first-child{
    background: rgba(0,0,0,0.02);
  }
  .card:nth-child(2){
    background: rgba(0,0,0,0.04);
  }

  .card:nth-child(3){
    background: rgba(0,0,0,0.06);
  }

  .card:nth-child(4){
    background: rgba(0,0,0,0.08);
  }

  .card:nth-child(5){
    background: rgba(0,0,0,0.10);
  }

  .card:last-child{
    background: rgba(0,0,0,0.11);
  }

  /*页脚*/


  footer {
    margin-top: 0em;
    background: #1F1F1F;
    padding: 0 2% .5em;
    padding-bottom: 0px;

  }
  #footer {
    width: 95%;
    margin: 0 auto;
    position: relative;
  }
  #footer .line {
    width: 10em;
    float: left;
    position: relative;
    height: 14em;
    margin: 0 auto;
  }
  #footer .line span {
    position: absolute;
    left: 3em;
    margin: 0 0 1.5em;
    display: block;
    width: .5em;
    height: 6.25em;
    border-right: .125em solid #fff;
    margin: 0 auto;
  }

  .author {
    position: absolute;
    top: 6em;
    margin: 0 0 1.5em;
    width: 6.875em;
    height: 6.875em;
    margin: 0 auto;
    background: url("./assets/images/momo.jpg") left top no-repeat;
    -webkit-background-size: 6.875em 6.875em;
    -moz-background-size: 6.875em 6.875em;
    background-size: 6.875em 6.875em;
    -webkit-border-radius: 3.4375em;
    border-radius: 3.4375em;
    -webkit-transition: -webkit-transform 0.2s ease-out;
    -moz-transition: -moz-transform 0.2s ease-out;
    -o-transition: -o-transform 0.2s ease-out;
    -ms-transition: -ms-transform 0.2s ease-out;

  }
  .author:hover{
    -webkit-transform: rotateZ(720deg);
    -moz-transform: rotateZ(720deg);
    -o-transform: rotateZ(720deg);
    -ms-transform: rotateZ(720deg);
    transform: rotateZ(720deg);
  }
  #footer .line{
    width: 10em;
    float: left;
    position: relative;
  }
  .info{
    width:900px;
    height: 200px;
    margin: 0 auto;
  }
  .info p{
    margin-top: 110px;
    color: #fff;
    display: inline-block;
    font-family: 华文行楷;
    font-size: 40px;
    letter-spacing: 2px;
  }
  .icon_link{
    width: 15em;
    position: absolute;
    right: -2em;
    top: 4em;
    letter-spacing: 25px;
  }
  .copy{
    width: inherit;
    text-align: center;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-family: 方正舒体;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 10px;
  }
  .beianhao{
    width: inherit;
    text-align: center;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 10px;
    text-decoration:none;
  }
</style>
